<template>
	<div>
		<div style="margin-bottom: 70px;">
			<!-- 搜索栏 -->
			<div>
				<van-search v-model="searchValue" show-action placeholder="想找什么车" @search="onSearch"
					background="#4fc08d">
					<template #action>
						<div @click="onSearch">搜索</div>
					</template>
				</van-search>
			</div>
			<div>
				<!-- 筛选汽车 -->
				<van-dropdown-menu style="height: 40px;">
					<van-dropdown-item v-model="dropdown.value1" :options="dropdown.option1"
						@change="onChangeDropdown" />
					<van-dropdown-item title="品牌" ref="item">
						<brand-index-bar @click="onConfirm" @clickBrand="clickBrand"></brand-index-bar>
					</van-dropdown-item>
					<van-dropdown-item v-model="dropdown.value3" :options="dropdown.option3" @change="onChangeDropdown"
						title="价格" />
					<van-dropdown-item v-model="dropdown.value4" :options="dropdown.option4" @change="onChangeDropdown"
						title="车型" />
				</van-dropdown-menu>
				<!-- 车辆列表 -->
				<div>
					<!-- 列表一 -->
					<van-list v-model:loading="state.loading" :finished="state.finished" finished-text="到底啦"
						@load="onLoad" offset="0" v-show="!searchDiv">
						<!-- 车辆列表组件 -->
						<usedcar-list :data="usedcarList" @onBtnClick="onCarDetail"></usedcar-list>
						<van-empty v-show="noResult" description="没有找到您想要的车辆" />
					</van-list>
					<!-- 列表二 -->
					<van-list v-model:loading="state.loadingSearchAndChoice" :finished="state.finishedSearchAndChoice"
						finished-text="没有更多了" @load="onLoadSearchAndChoice" offset="0" v-show="searchDiv">
						<!-- 车辆列表组件 -->
						<usedcar-list :data="usedcarList" @onBtnClick="onCarDetail"></usedcar-list>
						<van-empty v-show="noResult" description="没有找到您想要的车辆" />
					</van-list>
				</div>
			</div>
		</div>
		<my-tabbar :active="tabbarName"></my-tabbar>
	</div>
</template>

<script>
	import {
		ref,
		reactive
	} from 'vue'
	export default {
		setup() {
			const item = ref(null);
			const onConfirm = (vales) => {
				item.value.toggle();
			};
			return {
				item,
				onConfirm,
			};
		},
		data() {
			return {
				tabbarName: "usedcar",
				//分页请求
				pageRequest: {
					currentPage: 1,
					pageSize: 7,
					params: {}
				},
				//列表状态标识
				state: {
					loading: false,
					finished: false,
					loadingSearchAndChoice: false,
					finishedSearchAndChoice: false,
					repeatClick: false
				},
				searchDiv: false, //搜索div界面
				//搜索关键字
				searchValue: '',
				//车辆列表
				usedcarList: [],
				//筛选文字
				dropdown: {
					value1: "def-newest",
					value2: "brand-unlimited",
					value3: "price-unlimited",
					value4: "carType-unlimited",
					option1: [{
						text: '默认排序',
						value: "def-newest"
					}, {
						text: '价格最低',
						value: "def-priceLowest"
					}, {
						text: '价格最高',
						value: "def-priceHighest"
					}, {
						text: '里程最少',
						value: "def-mileageLowest"
					}],
					option2: [{
						text: '不限',
						value: "brand-unlimited"
					}],
					option3: [{
						text: '不限',
						value: "price-unlimited"
					}, {
						text: '3万以下',
						value: "price-below3"
					}, {
						text: '3-5万',
						value: "price-3to5"
					}, {
						text: '5-10万',
						value: "price-5to10"
					}, {
						text: '10-15万',
						value: "price-10to15"
					}, {
						text: '15-20万',
						value: "price-15to20"
					}, {
						text: '20万以上',
						value: "price-over20"
					}],
					option4: [{
						text: '不限',
						value: "carType-unlimited"
					}, {
						text: '微型车',
						value: "carType-mini"
					}, {
						text: '小型轿车',
						value: "carType-small"
					}, {
						text: '中大型轿车',
						value: "carType-middleAndLarge"
					}, {
						text: 'SUV',
						value: "carType-SUV"
					}, {
						text: 'MPV',
						value: "carType-MPV"
					}, {
						text: '面包车',
						value: "carType-Van"
					}, {
						text: '皮卡',
						value: "carType-Pickup"
					}]
				}
			}

		},
		mounted() {
			let searchValue = this.$route.query.searchValue
			if (searchValue != null && searchValue != '') {
				this.searchValue = searchValue
				this.pageRequest.params.searchName = searchValue
			}

		},
		computed: {
			//搜索无结果时显示的提示
			noResult() {
				if (this.usedcarList.length > 0) {
					return false
				}
				return true
			}
		},
		methods: {
			//车辆详情页
			onCarDetail(carId) {
				this.$router.push({
					path: "/page/detail",
					query: {
						id: carId
					}
				})
			},
			//列表滑倒底部自动刷新
			onLoad() {
				let _this = this
				_this.$axios({
					method: 'post',
					url: '/usedcar/findAll',
					data: _this.pageRequest
				}).then((resp) => {
					if (resp.data.totalPages == 0) {
						_this.state.loading = false
						_this.state.finished = true
					} else {
						//在数组末尾追加数据
						for (let i = 0; i < resp.data.content.length; i++) {
							_this.usedcarList.push(resp.data.content[i])
						}

						// 加载状态结束
						_this.state.loading = false

						// 数据全部加载完成
						if (_this.pageRequest.currentPage == resp.data.totalPages) {
							_this.state.finished = true
						}

						//设置第下一页
						_this.pageRequest.currentPage = resp.data.currentPage + 1
					}
				})
			},
			//搜索
			onSearch() {
				this.searchDiv = true
				//车辆数据初始化
				this.usedcarList = []
				this.pageRequest.currentPage = 1
				this.pageRequest.params.select = "searchName"
				this.pageRequest.params.value = this.searchValue

				if (this.state.repeatClick == true) {
					this.state.finishedSearchAndChoice = false
				} else {
					this.onLoadSearchAndChoice()
				}
			},
			//筛选
			onChangeDropdown(value) {
				let arr = value.split('-')
				this.searchDiv = true
				//车辆数据初始化
				this.usedcarList = []
				this.pageRequest.currentPage = 1
				this.pageRequest.params.select = arr[0]
				this.pageRequest.params.value = arr[1]

				if (this.state.repeatClick == true) {
					this.state.finishedSearchAndChoice = false
				} else {
					this.onLoadSearchAndChoice()
				}
			},
			//筛选品牌
			clickBrand(value) {
				console.log(value)
				this.searchDiv = true
				//车辆数据初始化
				this.usedcarList = []
				this.pageRequest.currentPage = 1
				this.pageRequest.params.select = "searchName"
				this.pageRequest.params.value = value

				if (this.state.repeatClick == true) {
					this.state.finishedSearchAndChoice = false
				} else {
					this.onLoadSearchAndChoice()
				}
			},
			//搜索、筛选功能的自动刷新
			onLoadSearchAndChoice() {
				let _this = this
				_this.$axios({
					method: 'post',
					url: '/usedcar/choiceCar',
					data: _this.pageRequest
				}).then((resp) => {
					if (resp.data.totalPages == 0) {
						//无数据处理
						_this.state.loadingSearchAndChoice = false
						_this.state.finishedSearchAndChoice = true
					} else {
						//有数据处理：在数组末尾追加数据
						for (let i = 0; i < resp.data.content.length; i++) {
							_this.usedcarList.push(resp.data.content[i])
						}

						// 加载状态结束
						_this.state.loadingSearchAndChoice = false

						// 数据全部加载完成
						if (_this.pageRequest.currentPage == resp.data.totalPages) {
							_this.state.finishedSearchAndChoice = true
							//重复点击处理
							_this.state.repeatClick = true
						}

						//设置第下一页
						_this.pageRequest.currentPage = resp.data.currentPage + 1
					}
				})
			}
		}
	}
</script>

<style scoped>
</style>
